Bill's ComputerA Pokemon trainer's desktop OS in the browser |
Format | Web App | |
|---|---|---|---|
| Discipline | Art Direction, Code, Design | ||
| By | LUKEABC | Date | 2026 |
A fully interactive desktop operating system in the browser, themed as a Pokemon trainer's workstation. "OakOS" simulates a retro 90s PC where you manage your Pokemon Trading Card Game collection, chat with AI characters, explore the Kanto map, and more. The whole thing is one HTML file, no build step.
It started because I collect Pokemon cards and every app or site for logging your collection is obsessed with prices — everything's about portfolio value, market drops, what your cards are "worth." I just wanted somewhere to organise my collection without constantly being reminded of money. So I built my own thing.
The premise became: what if Professor Oak gave you a computer? OakOS is a love letter to 90s desktop interfaces and the Pokemon universe. It takes the nostalgia of Windows 95 chrome, Game Boy boot screens, and AIM-style messaging and wraps it around a functional card collection tool. Everything is designed to feel like a real OS from 2001 that a Pokemon trainer would actually use.
| App | Detail |
|---|---|
| Dex | Full Pokemon TCG card browser with search, filters, and 3D card rendering |
| Binders | Collection manager — create custom binders, drag-and-drop sorting |
| Messenger | AI chat with in-character personas (Oak, Ash, Gary, Team Rocket) via Groq/Llama |
| Map | Pannable, zoomable Kanto region map |
| Music | Album player with equalizer visualizer |
| trainer_notes.txt | Persistent text editor |
| Settings | Wallpaper, data management |
| PokeClock | Real-time clock |
The entire app is a single HTML file (~9,000 lines). React 18 is loaded via CDN with Babel transpiling JSX in-browser — no bundler, no build step. Card rendering uses perspective transforms with mouse-tracked tilt, shine, and holographic overlays. The window manager handles drag, resize, minimize, maximize, focus tracking, and z-index stacking. A CRT-style boot sequence plays on load with phosphor green text, scanlines, and glass reflections.
| Layer | Technology |
|---|---|
| Framework | React 18 (CDN, in-browser Babel) |
| Card data | TCGdex API + PokeAPI |
| AI chat | AWS Lambda proxy → Groq / Llama 3.1 |
| Storage | localStorage, no backend |
| Hosting | Vercel |
| Role | Name |
|---|---|
| Art Direction, Code, Design | Lukeabc |